<template>
   <view class="uv-page" style="height: 150vh">
      <!-- 滚动透明度导航栏 -->
      <uv-navbar
         ref="scrollNavbar"
         title="滚动透明度"
         :auto-back="true"
         :scroll-transparent="true"
      />

      <view class="content-area">
         <view class="hero-section">
            <text class="hero-title">向下滚动查看透明度效果</text>
            <text class="hero-desc">导航栏会随着滚动逐渐显示</text>
         </view>

         <view class="uv-page__item">
            <view class="uv-page__item__title">基础功能</view>
            <uv-navbar
               title="个人中心"
               :safeAreaInsetTop="false"
               :fixed="false"
               @rightClick="rightClick"
               @leftClick="leftClick"
            >
            </uv-navbar>
         </view>
         <view class="uv-page__item">
            <view class="uv-page__item__title">自定义文本</view>
            <uv-navbar
               :safeAreaInsetTop="false"
               title="个人中心"
               :fixed="false"
               left-text="返回"
               rightIcon="map"
            >
            </uv-navbar>
         </view>
         <view class="uv-page__item">
            <view class="uv-page__item__title">自定义插槽</view>
            <uv-navbar leftText="返回" :fixed="false" title="个人中心" :safeAreaInsetTop="false">
               <template v-slot:left>
                  <view class="uv-nav-slot">
                     <uv-icon name="arrow-left" size="19"></uv-icon>
                     <uv-line
                        direction="col"
                        :hairline="false"
                        length="16"
                        margin="0 8px"
                     ></uv-line>
                     <uv-icon name="home" size="20"></uv-icon>
                  </view>
               </template>
            </uv-navbar>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';

const scrollNavbar = ref();

const rightClick = () => {
   console.log('rightClick');
};

const leftClick = () => {
   console.log('leftClick');
};

// 页面滚动监听
onPageScroll(e => {
   if (scrollNavbar.value && scrollNavbar.value.updateScrollTop) {
      scrollNavbar.value.updateScrollTop(e.scrollTop);
   }
});
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

/* #ifndef APP-NVUE */
page {
   background-color: $uv-bg-color;
}
/* #endif */

.uv-page {
   padding: 0;
   flex: 1;
   background-color: $uv-bg-color;

   &__item {
      &__title {
         color: $uv-tips-color;
         background-color: $uv-bg-color;
         padding: 15px;
         font-size: 15px;

         &__slot-title {
            color: $uv-primary;
            font-size: 14px;
         }
      }
   }
}

.uv-nav-slot {
   @include flex;
   align-items: center;
   justify-content: space-between;
   border-width: 0.5px;
   border-radius: 100px;
   border-color: $uv-border-color;
   padding: 3px 7px;
   opacity: 0.8;
}

.content-area {
   position: relative;
   z-index: 1;
}

.hero-section {
   height: 300px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   @include flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   .hero-title {
      color: white;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
   }

   .hero-desc {
      color: rgba(255, 255, 255, 0.8);
      font-size: 16px;
   }
}
</style>
